{% extends 'base.html' %}

{% block title %}教师控制面板{% endblock %}

{% block content %}
<div class="container py-4">
    <h1 class="mb-4">欢迎回来，{{ session.get('username') }}</h1>
    
    <div class="row">
        <div class="col-md-8">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title mb-0">总览</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="me-3">
                                    <span class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                        <i class="bi bi-people-fill"></i>
                                    </span>
                                </div>
                                <div>
                                    <h6 class="mb-0">学生总数</h6>
                                    <h3 class="mb-0">{{ students_count }}</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="me-3">
                                    <span class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                        <i class="bi bi-journal-text"></i>
                                    </span>
                                </div>
                                <div>
                                    <h6 class="mb-0">课程数</h6>
                                    <h3 class="mb-0">{{ courses|length }}</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="me-3">
                                    <span class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                        <i class="bi bi-clipboard-check"></i>
                                    </span>
                                </div>
                                <div>
                                    <h6 class="mb-0">练习总数</h6>
                                    <h3 class="mb-0">{{ exercises_count }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 最近课程 -->
            <div class="card shadow-sm mb-4">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">您的课程</h5>
                        <a href="{{ url_for('teacher_courses') }}" class="btn btn-sm btn-primary">管理课程</a>
                    </div>
                </div>
                <div class="card-body">
                    {% if courses %}
                        <div class="list-group">
                            {% for course in courses[:5] %}
                                <a href="{{ url_for('teacher_course_exercises', course_id=course.id) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-1">{{ course.title }}</h6>
                                        <small class="text-muted">{{ course.description|truncate(100) }}</small>
                                    </div>
                                    <span class="badge bg-primary rounded-pill">{{ course.exercises|length }} 练习</span>
                                </a>
                            {% endfor %}
                        </div>
                        {% if courses|length > 5 %}
                            <div class="text-end mt-3">
                                <a href="{{ url_for('teacher_courses') }}" class="btn btn-sm btn-outline-primary">查看全部 &rarr;</a>
                            </div>
                        {% endif %}
                    {% else %}
                        <p class="text-muted">您尚未创建任何课程。</p>
                        <a href="{{ url_for('teacher_edit_course') }}" class="btn btn-primary">创建课程</a>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <!-- 学生表现 -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="card-title mb-0">学生表现</h5>
                </div>
                <div class="card-body">
                    <canvas id="studentPerformanceChart"></canvas>
                </div>
            </div>
            
            <!-- 快速操作 -->
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="card-title mb-0">快速链接</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ url_for('teacher_manage_students') }}" class="btn btn-outline-primary">管理学生</a>
                        <a href="{{ url_for('teacher_courses') }}" class="btn btn-outline-primary">管理课程</a>
                        <a href="{{ url_for('teacher_edit_course') }}" class="btn btn-outline-primary">创建新课程</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
{% endblock %}

{% block extra_js %}
<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script>
$(document).ready(function() {
    // 模拟学生表现数据
    var performanceData = {
        labels: ['优秀', '良好', '一般', '需要帮助'],
        datasets: [{
            data: [30, 40, 20, 10],
            backgroundColor: [
                'rgba(75, 192, 192, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(255, 99, 132, 0.6)'
            ],
            borderColor: [
                'rgba(75, 192, 192, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(255, 99, 132, 1)'
            ],
            borderWidth: 1
        }]
    };
    
    // 创建学生表现图表
    var performanceCtx = document.getElementById('studentPerformanceChart').getContext('2d');
    var performanceChart = new Chart(performanceCtx, {
        type: 'pie',
        data: performanceData,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
});
</script>
{% endblock %} 